﻿<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Timer</title>
    <script type="text/javascript" src="/Utilities/webdesk/webdesk.ui.core.js"></script>
    <script type="text/javascript" src="/Utilities/webdesk/scripts/ctrls.js"></script>
    <script type="text/javascript" src="/Utilities/webdesk/panel/Scripts/timer.js"></script>
    <style type="text/css">
    html,
    body {
        overflow: hidden;
        background-size: 100% 100%;
        background-color: #eee;
    }

    h1 {
        font-size: 25px;
        color: #333;
        margin: 0px;
        display: block;
        overflow: hidden;
        height: 40px;
        font-weight: 900;
        white-space: nowrap;
        text-shadow: .2rem 0rem 1.2rem rgba(255, 255, 255, 1), -.2rem 0rem 1.2rem rgba(255, 255, 255, 1), 0rem .2rem 1.2rem rgba(255, 255, 255, 1), 0rem -.2rem 1.2rem rgba(255, 255, 255, 1);
    }

    h1 span {

        font-size: 15px;
        margin-left: 20px;
    }

    h1 b:before {
        content: "\a021";
        font-size: 30px;
        line-height: 40px;
        margin-right: 10px;
    }

    a.home {
        display: block;
        width: 120px;
        height: 40px;
        line-height: 40px;
        float: right;
        font-size: 14px;
        text-align: center;
        color: #333;
        text-decoration: none;
        font-weight: normal;
    }

    a.home:before {
        content: "\a020";
        font-size: 18px;
        line-height: 40px;
        margin-right: 2px;

        font-family: "webdesk_icon" !important;
    }

    #space {
        float: left;
        background-color: yellow;
        height: 200px;
        width: 200px;
        transition: width 0.3s, height 0.3s;
    }



    a {
        color: #000;
    }

    p {
        font-size: 15px;
        margin: 0px;
        padding: 0px;
        line-height: 25px;
    }

    .intro-panel {
        margin: 10px;
        position: absolute;
        width: calc(100% - 140px);
        height: calc(100% - 140px);
        left: 40px;
        bottom: 0px;
        padding: 20px;
        overflow: auto;
        background-color: rgba(255, 255, 255, 0.6);
    }

    timer {
        display: block;
    }

    table {
        background-color: #ccc;
        width: calc(100% - 20px);
    }

    table td {
        background-color: #fff;
    }

    th,
    td {
        height: 25px;
        line-height: 25px;
    }

    td {
        padding: 0px 10px 0px 10px;
    }

    table tr td:first-child {
        text-align: center;
        padding: 0px;
    }

    table#eventTable tr td:first-child:before {
        content: 'on'
    }

    .intro-panel b {
        font-size: 16px !important;
        margin-top: 10px !important;
        display: block;
    }
    </style>
</head>

<body oncontextmenu='return false;'>
    <div style="height: 40px; padding-left: 20px;">
        <h1><b class="webdesk_icon"></b>Timer.js 定时器 <a class='home' href="/">返回首页</a></h1>
    </div>
    <div class="intro-panel">
        <b>简述：</b>
        <div>
            <ul>
                <li>功能比较简单，只是显示时间</li>
                <li>可以设置初始时间，例如采用服务器端时间</li>
            </ul>
        </div>
        <timer format='yyyy年M月d日 星期w hh:mm:ss'></timer>
        <timer format='yy-M-d HH:mm:ss'></timer>
        <hr/>
        <b>属性：</b>
        <div>
            <p>只有一个属性 time,是定时器的初始时间。</p>
            <p>例如，当采用服务器端时间时，将获取到的时间值赋给time即可。</p>
        </div>
         <b>方法：</b>
        <div>
            <p>下表只列出了常用方法，更多请参看源码。</p>
        </div>
        <table width="100%" border="0" cellspacing="1" cellpadding="1">
            <tr>
                <th scope="col" width="100px">方法</th>
                <th scope="col">说明</th>
                <th scope="col">参数</th>
            </tr>
            <tr>
                <td>addplan()</td>
                <td>添加计划</td>
                <td>{val:10,
                unit:'s',
            loop:10,
            event:function(plan){}}<br/>
            unit：为时间单位；<br/>
            loop：为循环次数，如果为负则无限循环<br/>
            event：定时事件，plan参数为计划，this为$timer对象自身
        </td>
            </tr>
             <tr>
                <td>delplan()</td>
                <td>删除计划</td>
                <td>id:计划的id,如果没有参数，则清除所有计划</td>
            </tr>
        </table>
        <b>事件：</b>
        <div>
           
        </div>

        <table id="eventTable" width="100%" border="0" cellspacing="1" cellpadding="1">
            <tr>
                <th scope="col" width="80px">事件</th>
                <th scope="col" width="180px">说明</th>
                <th scope="col" width="180px">参数sender</th>
                <th scope="col">参数e</th>
            </tr>
            <tr>
                <td>time</td>
                <td>设置初始时间时触发</td>
                <td>当前$timer对象</td>
                <td>e.event：事件名称<br>
                    e.action：动作，默认与e.event同值<br>
                    e.time：初始时间值</td>
            </tr>
        </table>
    </div>
</body>
<script type="text/javascript">
window.$timer.watch({
    'second': function(obj, val, old) {
        //console.log(val);
    }
});
/*
window.$timer.addplan('2',function(plan){
    //alert(4);
    console.log(this.format('yyyy年M月d日 星期w hh:mm:ss'));
});
*/
window.$timer.addplan({
    val: 2,
    unit: 's',
    loop: -1,
    event:function() {
        //console.log(this.format('yyyy年M月d日 星期w hh:mm:ss'));
    }
});
window.$timer.ontime(function(s,e){
    console.log('初始时间：'+s.format('yyyy年M月d日 星期w hh:mm:ss'));
});
</script>

</html>